<template>
	<div id="app">
		<router-view></router-view>
		<el-dialog title="正在更新新版本,请稍候..." :visible.sync="dialogVisible" width="340"
			:close-on-click-modal="closeOnClickModal" :close-on-press-escape="closeOnPressEscape"
			:show-close="showClose" center>
			<div style="width:200px;height:240px; text-align:center;margin:20px auto;">
				<el-progress :stroke-width="20" :percentage="percentage" :width="strokeWidth" :show-text="true"
					color="#FF5E03" type="circle"></el-progress>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		isElectron
	} from "@/utils/isElectron.js";
	import {
		ipcRenderer
	} from "electron";
	import mp3 from "./assets/voice/tishi.mp3";
	export default {
		name: "app",
		data() {
			return {
				dialogVisible: false,
				closeOnClickModal: false,
				closeOnPressEscape: false,
				showClose: false,
				percentage: 0,
				strokeWidth: 200,
				timer: 0,
			};
		},
		unmounted() {
			clearInterval(this.timer);
		},
		mounted() {
			ipcRenderer.on("play-notification-sound", () => {
				let player = new Audio(mp3);
				player.play();
			});
			if (isElectron()) {
				let ipcRenderer1 = require("electron").ipcRenderer;
				//检查代码是否正在Electron或浏览器中执行
				// console.log("Electron中执行 !");
				let that = this;
				//新增
				setTimeout(() => {
					ipcRenderer1.send("checkForUpdate");
				}, 1);

				//接收主进程版本更新消息
				ipcRenderer1.on("message", (event, arg) => {
					//新增内容
					if ("confimUpdate" == arg.cmd) {
						that.dialogVisible = true;
					} else if ("download-progress" == arg.cmd) {
						let percent = Math.round(parseFloat(arg.message.percent));
						that.percentage = percent;
					} else if ("error" == arg.cmd) {
						console.log('app', arg)
						that.dialogVisible = false;
						// that.$message("更新失败");
					}
					if ("update-downloaded" == arg.cmd) {
						that.$alert("新版本已经下载完成", "版本更新", {
							confirmButtonText: "立即安装",
							callback: action => {
								if (action == 'confirm') {
									ipcRenderer1.send("quit-install");
								}
							},
						});
					}
				});
			} else {
				console.log("浏览器中执行");
			}
			// }
		},
	};
</script>
<style>
	/* 隐藏垂直滚动条 */
	.el-table__body-wrapper::-webkit-scrollbar {
		display: none;
		/* for Chrome, Safari, and Opera */
	}

	.el-table__body-wrapper {
		-ms-overflow-style: none;
		/* for Internet Explorer, Edge */
		scrollbar-width: none;
		/* for Firefox */
	}

	/* 隐藏水平滚动条 */
	.el-table__body-wrapper::-webkit-scrollbar {
		display: none;
		/* for Chrome, Safari, and Opera */
	}

	.el-table__body-wrapper {
		-ms-overflow-style: none;
		/* for Internet Explorer, Edge */
		scrollbar-width: none;
		/* for Firefox */
	}

	html,
	body {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0px;
		margin: 0px;
	}

	#app {
		font-family: "Avenir", Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		width: 100%;
		height: 100%;
	}

	.el-dialog__body {
		padding-top: 0px !important;
		padding-bottom: 0px !important;
	}

	/* @font-face {
	font-family:PingFang;
	src: url('./assets/css/PingFang Medium.ttf');
	font-weight: normal;
	font-style: normal;
} */
</style>